.mask-scroller {
  mask:
    linear-gradient(to right, white, transparent) 0 50% / 0.8rem 100% no-repeat,
    linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
    linear-gradient(to right, transparent, white) 100% 50% / 0.8rem 100% no-repeat;
  mask-composite: exclude;
  mask-size:
    calc((var(--scroll-progress-left) / 100) * 0.8rem) 100%,
    100% 100%,
    calc((100 - (100 * (var(--scroll-progress-right) / 100))) * 1px) 100%;
}

@supports (animation-timeline: scroll()) {
  .mask-scroller {
    mask:
      linear-gradient(to right, white, transparent) 0 50% / 0.8rem 100% no-repeat,
      linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
      linear-gradient(to right, transparent, white) 100% 50% / 1.6rem 100% no-repeat;
    mask-composite: exclude;
    animation:
      mask-left both linear,
      mask-right both linear;
    animation-timeline: scroll(self);
    animation-range:
      0 50px,
      calc(100% - 50px) 100%;
  }
}

@keyframes mask-left {
  100% {
    mask-size:
      0.8rem 100%,
      100% 100%,
      0.8rem 100%;
  }
}

@keyframes mask-right {
  100% {
    mask-size:
      0.8rem 100%,
      100% 100%,
      0 100%;
  }
}
